<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My AI</title>
</head>

<body style="display: flex; flex-direction: column; height: 100vh; overflow: hidden;">
    <div style="display: grid; gap: 8px;  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
        <button id="btn">win测试登录</button>
        <button id="logout">win测试退出</button>
        <button data-action="mac login">mac测试登录</button>
        <button data-action="mac logout">mac测试退出</button>
    </div>
    <script>
        document.getElementById('btn').addEventListener('click', () => {
            window.chrome?.webview?.hostObjects?.external?.SetUserData?.('60587', 'token');
            alert('测试 window.chrome.webview.hostObjects.external.SetUserData 类型:' + typeof window.chrome?.webview?.hostObjects?.external?.SetUserData)
        })
        document.getElementById('logout').addEventListener('click', () => {
            window.chrome?.webview?.hostObjects?.external?.Logout?.();
            alert('测试 window.chrome.webview.hostObjects.external.Logout 类型:' + typeof window.chrome?.webview?.hostObjects?.external?.Logout)
        })

        document.body.addEventListener('click', (e) => {
            if (e.target.dataset?.action === 'mac login') {
                window.webkit?.messageHandlers?.receiveUserData.postMessage({ "UserId": 60587, "Token": 'token' });
                alert('测试mac 登录  window.webkit?.messageHandlers?.receiveUserData.postMessage 类型:' + typeof window.webkit?.messageHandlers?.receiveUserData.postMessage)
            } else if (e.target.dataset?.action === 'mac logout') {
                window.webkit?.messageHandlers?.receiveUserData.postMessage({ type: 'logout' });
                alert('测试mac 退出 window.webkit?.messageHandlers?.receiveUserData.postMessage 类型:' + typeof window.webkit?.messageHandlers?.receiveUserData.postMessage)
            }
        })
    </script>
</body>

</html>